<template>
  <vxe-grid ref='xGrid' v-bind="gridOptions">
    <template #toolbar_buttons>
      <vxe-button icon="vxe-icon--d-arrow-right" status="default" @click="setAllTreeExpand">展开/收起</vxe-button>
    </template>
  </vxe-grid>
</template>
<script lang="ts" name="RoleDrawerGrantMenu" setup>
import { concat, } from 'lodash-es';
import { reactive, ref, watch } from 'vue';
import { VxeGridProps, VxeTablePropTypes } from 'vxe-table';
import { menuColumns } from '../data';
import { getListData, } from '/@/api/admin/menu';

const props = defineProps({
    show: Boolean,
    ownedList: {
      type: Array,
      default: ():number[] => [],
    },
    rid: Number,
})

const checkboxConfig = reactive<VxeTablePropTypes.CheckboxConfig>({
    // labelField: 'ID',
    reserve: true,
    highlight: true,
    range: false,
    trigger: 'cell',
    checkStrictly: true,
    // checkRowKeys: defaultChecked.value,
  },)

watch(() => props.ownedList, (v1: number[], _) => {
  if (v1 && v1.length > 0) {
    checkboxConfig.checkRowKeys = v1
  }
}, {immediate: true, deep: true,})

const xGrid = ref()
// const size = ref<SizeType>('mini')
const gridOptions = reactive<VxeGridProps>({
  border: false,
  resizable: true,
  showHeaderOverflow: true,
  showOverflow: true,
  highlightHoverRow: true,
  keepSource: true,
  id: 'xGridGrantMenu',
  height: window.innerHeight-300, // 260
  // size: size.value,
  // rowId: 'ID',
  columns: menuColumns,
  columnConfig: {
    useKey: false,
    isCurrent: true,
    isHover: true,
  },
  rowConfig: {
    keyField: 'ID',
    useKey: true,
    isCurrent: true,
    isHover: false,
  },
  customConfig: {
    storage: true,
  },
  printConfig: {
    columns: [
      // {field: 'name'},
    ]
  },
  sortConfig: {
    trigger: 'cell',
    remote: false
  },
  filterConfig: {
    remote: false
  },
  toolbarConfig: {
    refresh: false,
    import: false,
    export: false,
    print: false,
    zoom: true,
    custom: true,
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  checkboxConfig: checkboxConfig,
  treeConfig: {
    rowField: 'ID',
    trigger: 'cell',
    showLine: true,
    expandAll: true,
  },
  proxyConfig: {
    autoLoad: true,
    ajax: {
      query({ page, sort, sorts, filters, form }) {
        return getListData({rid: props.rid})
      }
    }
  },
});

const allExpand = ref(true)
const setAllTreeExpand = () => {
  allExpand.value = !allExpand.value
  xGrid.value.setAllTreeExpand(allExpand.value)
}

const getCheckedRowList = ():any => {
  return concat(xGrid.value.getCheckboxIndeterminateRecords(true), xGrid.value.getCheckboxRecords(true));
}

defineExpose({
  getCheckedRowList
})
</script>
